<template>
  <div class="full page">
    <div class="center form-container">
      <h2 class="t_center heading">注册</h2>
      <a-form
        layout="vertical"
        :model="formState"
        name="basic"
        autocomplete="off"
      >
        <a-form-item label="账户名" name="username" >
          <a-input v-model:value="formState.username" />
        </a-form-item>

        <a-form-item label="密码" name="password">
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item label="确认密码" name="confirmPassword">
          <a-input-password v-model:value="formState.confirmPassword" />
        </a-form-item>

        <a-form-item class="m_unset">
          <a-button type="primary" html-type="submit" size="large" class="btn" @click="submit"
            >完成注册</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { useRouter } from "vue-router";
const router = useRouter();
const formState = reactive({
  username: '',
  password: '',
  confirmPassword: '',
});


function submit() {
  router.push({ path: "/login" })
}

</script>

<style lang="scss" scoped>
.page {
  background: #f5feff;
}
.form-container {
  min-width: 400px;
  background: red;
  border-radius: 16px;
  padding: 32px;
  background: rgba(255, 255, 255, 1);
  border: 4px solid rgba(57, 105, 163, 1);
  color: rgba(57, 105, 163, 1);
  font-size: 20px;
}
.heading {
  color: rgba(57, 105, 163, 1);
  font-size: 40px;
  font-weight: 400;
}

.btn {
  display: block;
  width: 100%;
  height: unset !important;
  border-radius: 16px;
  background: rgba(166, 206, 255, 1);
  border: 4px solid rgba(57, 105, 163, 1);
  font-size: 34px;
  font-weight: 400;
  color: #fff;
}
</style>
